<template>
	<view class="content">
		<image src="@/static/login1.png" class="login1Pic" mode="widthFix"></image>
		<view class="partner_box1" v-if="type">
			<view class="box1_box1" @click="type=1">密码登录</view>
			<view class="box1_box1" @click="type=2">验证码登录</view>
			<view class="box1_box2 goldBg" :style="type==1?'left:0;':'left:325upx;'"></view>
		</view>
		<view v-if="type==1">
			<view class="chooseItem">
				<view class="itemTitle">邮箱</view>
				<input type="text" v-model="email" @focus="langVisible=false" @blur="langVisible=true" placeholder="请输入您的邮箱" placeholder-style="color:#999999;">
			</view>
			<view class="chooseItem">
				<view class="itemTitle">密码</view>
				<input type="text" v-model="password" @focus="langVisible=false" @blur="langVisible=true" placeholder="请输入您的密码" placeholder-style="color:#999999;">
			</view>
		</view>
		<view v-if="type==2">
			<view class="chooseItem">
				<view class="itemTitle">邮箱</view>
				<input type="text" v-model="email" @focus="langVisible=false" @blur="langVisible=true" placeholder="请输入您的邮箱" placeholder-style="color:#999999;">
			</view>
			<view class="chooseItem">
				<view class="itemTitle">验证码</view>
				<input type="text" v-model="code" @focus="langVisible=false" @blur="langVisible=true" placeholder="请输入验证码" placeholder-style="color:#999999;" style="width: 300upx;">
				<view class="goldColor" @click="getCodeFn" v-if="!codeing">获取验证码</view>
				<view class="goldColor" v-if="codeing">{{codeTime}}s</view>
			</view>
		</view>
		<view class="checkBox">
			<radio-group @change="radioChange">
				<radio :checked="checked" />
			</radio-group>
			<view>我已阅读并同意<text>用户服务条款</text></view>
		</view>
		<view class="sureBtn goldBg" @click="loginFn">确定</view>
		<view class="fogertPsd" @click="fogertPsdFn()">注册用户</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				email:'',
				password:'',
				code:'',
				checked:false,
				language:'cn',
				codeing:false,
				codeTime:60,
				timer0:'',
				langVisible:true,
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			radioChange(e){
				this.checked = true
			},
			fogertPsdFn(){
				this.type = 2
				uni.showToast({
					title:'请使用验证码登录后在个人中心修改密码',
					icon:'none'
				})
			},
			getCodeFn(){
				uni.showLoading({
					mask:true
				})
				this.$http('/api/user/sendEmailSms',{email:this.email},'POST',1).then(res=>{
					this.codeing = true
					uni.showToast({
						title:'发送成功',
						icon:'none'
					})
					uni.hideLoading()
					this.codeTime = 60
					this.timer0 = setInterval(()=>{
						this.codeTime--;
						if(this.codeTime<=0){
							this.codeing = false
							clearInterval(this.timer0)
						}
					},1000)
				})
			},
			loginFn(){
				if(!this.email){
					uni.showToast({
						title:'请填写邮箱地址',
						icon:'none'
					})
					return
				}
				if(!this.checked){
					uni.showToast({
						title:'请阅读并同意用户服务条款',
						icon:'none'
					})
					return
				}
				if(!this.password&&this.type==1){
					uni.showToast({
						title:'请填写密码',
						icon:'none'
					})
					return
				}
				if(!this.code&&this.type==2){
					uni.showToast({
						title:'请填写验证码',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					mask:true
				})
				if(this.type==1){
					this.$http('/api/user/passwordLogin',{username:this.email,password:this.password},'POST',1).then(res=>{
						if(this.timer0){
							clearInterval(this.timer0)
						}
						uni.setStorageSync('token',res.result.token.access_token)
						uni.setStorageSync('userInfo',res.result.userInfo)
						uni.hideLoading()
						// uni.navigateBack()
						// uni.navigateBack({
						//     delta: 1,
						//     fail: function() {
						//         console.log("返回失败");
								uni.reLaunch({
									url:'/pages/index/index'
								})
						    // }
						// });
					})

				}else {
					this.$http('/api/user/emailLogin',{email:this.email,verificationCode:this.code},'POST',1).then(res=>{
						if(this.timer0){
							clearInterval(this.timer0)
						}
						uni.setStorageSync('token',res.result.token.access_token)
						uni.setStorageSync('userInfo',res.result.userInfo)
						uni.hideLoading()
						uni.navigateBack()
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}
	.content {
		width: 750upx;
		padding: 100upx 50upx 0;
		text-align: center;
		.login1Pic {
			width: 350upx;
			height: 260upx;
			margin: 0 auto 70upx;
		}
		.partner_box1 {
			width: 100%;
			height: 82upx;
			background: #F7F7F7;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-bottom: 88upx;
			.box1_box1 {
				width: 325upx;
				height: 82upx;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				color: #000000;
				z-index: 2;
				font-weight: bold;
			}
			.box1_box2 {
				width: 325upx;
				height: 82upx;
				border-radius: 50upx;
				position: absolute;
				top: 0;
				z-index: 0;
				transition: all 0.6s;
			}
		}
		.chooseItem {
			width: 100%;
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			background: #F7F7F7;
			border-radius: 20upx;
			padding: 0 30upx;
			margin-bottom: 28upx;
			.itemTitle {
				font-size: 32upx;
				font-weight: bold;
			}
			input {
				height: 88upx;
				line-height: 88upx;
				width: 400upx;
				text-align: right;
			}
		}
		.checkBox {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #999999;
			line-height: 28upx;
			text {
				color: #B89565;
			}
		}
		.sureBtn {
			width: 650upx;
			height: 88rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			margin: 60rpx 0 20rpx;
		}
		.fogertPsd {
			font-size: 28rpx;
			color: #B89565;
			text-align: left;
		}
	}
	
</style>